<template>
	<div class="dianpuguanli">
    <left></left>
    <div style="padding: 20px 70px;">
      <div class="flexc">
        <el-upload :show-file-list="false" action="#" :http-request="uploasd">
          <el-button type="primary" round icon="el-icon-plus">导入</el-button>
        </el-upload>
        <div style="color: #999; cursor: pointer; margin-left: 20px; font-size: 14px;" @click="down">下载模板</div>
      </div>

      <el-table :data="list" style="width: 100%">
        <el-table-column align="center" prop="order_number" label="订单编号"></el-table-column>
        <el-table-column align="center" prop="type" label="销售渠道"></el-table-column>
        <el-table-column align="center" prop="create_time" label="导入时间"></el-table-column>
        <el-table-column align="center" prop="status_name" label="充值结果"></el-table-column>
        <el-table-column align="center" prop="remarks" label="失败原因"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <div class="flexcc" v-if="scope.row.status == -10">
              <div style="color: rgb(0, 90, 255); cursor: pointer;" @click="chongti(scope.row)">重提</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
    </div>
    <el-dialog title="上传结果" center :visible.sync="log" width="600px"  :close-on-click-modal="false" :close-on-press-escape="false">
        <div v-for="item in cuowulist" :key="item" style="margin-bottom: 20px;">
          {{item}}
        </div>
    	  <span slot="footer" class="dialog-footer">
    		<el-button type="danger" round @click="log = false">确定</el-button>
    	  </span>
    </el-dialog>
	</div>
</template>

<script>
  import left from '../left.vue'
	export default {
		name: 'dianpuguanli',
    components:{
      left
    },
		data() {
			return {
        list:[],
        search:{
          page:1,
          page_size:20,
        },
        total:0,
        cuowulist:[],
        log:false
			}
		},
		created() {
      this.getlist()

		},
		mounted() {

		},
		methods: {
      chongti:function(item){
        axios.post('/api/giftfee/resubmit',{id:item.id}).then((response)=>{
        	if (response.data.msg.code == 200) {
            this.$message.success('重提成功');
            this.getlist()
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      down:function(){
        const a = document.createElement('a');
        a.setAttribute('download', '导入.xlsx');
        a.setAttribute('href', location.origin + '/web/static/xlsx/daoru.xlsx');
        a.click();
      },
      uploasd:function(file){
        let ff = this.duwenjian(file)

        ff.then(res=>{

          let data = []
          res.forEach(item => {
            let obj = {
              type:item['销售渠道'],
              order_number:item['订单号'],
              mobile:item['手机号码'],
              province:item['归属地省'],
              city:item['归属地市']
            }
            data.push(obj)
          })

          axios.post('/api/giftfee/import',{data:data}).then((response)=>{
          	if (response.data.msg.code == 200) {
              this.cuowulist = response.data.data
              if(this.cuowulist && this.cuowulist.length > 0){
                this.log = true
              }else{
                this.$message.success(`导入成功`);
              }
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      getlist:function(){
        axios.get('/api/giftfee/list').then((response)=>{
        	if (response.data.msg.code == 200) {
        		this.list = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
		}
	}
</script>


<style scoped >

</style>
